<template>
    <el-row>
        <el-col :span="24" class="col">
            <el-row>
                <el-col :span="8">
                    公司名称：
                    <el-input style="width: 240px" v-model="name" placeholder="请输入公司名称" clearable></el-input>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="sousuo">搜索</el-button>
                </el-col>
            </el-row>
        </el-col>

        <el-col :span="24" class="col">
            <el-button type="primary" @click="xinzeng">新增公司</el-button>
        </el-col>

        <el-col :span="24" class="col">
            <el-table border :data="areaList" style="width: 100%">
                <el-table-column prop="id" label="ID" align="center" label-class-name="header"></el-table-column>
                <el-table-column prop="companyName" label="公司名称" align="center"
                    label-class-name="header"></el-table-column>
                <el-table-column prop="address" label="公司地址" align="center" label-class-name="header"></el-table-column>
                <el-table-column prop="phone" label="公司电话" align="center" label-class-name="header"></el-table-column>
                <el-table-column prop="email" label="公司邮件" align="center" label-class-name="header"></el-table-column>
                <el-table-column prop="introduction" label="公司简介" align="center"
                    label-class-name="header"></el-table-column>
                <!-- <el-table-column prop="del" label="公司状态" align="center" label-class-name="header"></el-table-column> -->
                <el-table-column label="操作" align="center" label-class-name="header">
                    <template #default="item">
                        <el-button type="text" @click="edite(item.row)">编辑</el-button>
                        <el-button type="text" @click="del(item.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-dialog v-model="show" :title="title" width="800" destroy-on-close="true">
            <EditeArea v-if="title == '编辑公司'"  :form="form"></EditeArea>
            <XinZeng v-if="title == '新增公司'"></XinZeng>
        </el-dialog>
        <el-dialog v-model="shan" :title="title" width="300" destroy-on-close="true">
            <ShanChu v-if="title == '删除'"  @operate="guanbi" :id="id"></ShanChu>
        </el-dialog>
    </el-row>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';
import EditeArea from './components/company/EditeArea.vue';
import ShanChu from './components/company/ShanChu.vue';
import XinZeng from './components/company/XinZeng.vue';
let res = null;
let areaList = ref([]);
let title = ref("");
let show = ref(false);
let shan = ref(false);
let id = ref({});
let form = ref({});
const name = ref('');


const xinzeng = function(){
    show.value = true;
    title.value = '新增公司';
}
const edite = function(data){
    show.value = true;
    title.value = "编辑公司";
    form.value = data;
}
const del = function(item){
    shan.value = true;
    title.value = '删除',
    id.value = { id: item.id };
}
const sousuo = async () => {
  try {
    const res = await axios.get(`/api/company/findAll2?name=${name.value}`);
    areaList.value = res.data.data;
  } catch (error) {
    console.error("搜索失败：", error);
  }
};
//首次加载
onMounted(async function () {
    res = await axios.get("/api/company/findAll")
    console.log(res);
    areaList.value = res.data.data;

})
const guanbi = function(){
    shan.value = false;
}
</script>
<style lang="less" scoped>
.col {
    margin: 10px 0;
}

/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>